<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>bootstrap5-表单元素</title>
  <link rel="stylesheet" href="css/bootstrap.min.css">

  <link rel="stylesheet" href="css/bs02.css">
</head>

<body>
  <!-- bs是手机优先框架，所有表单元素默认是一行 -->
  <div>
    <input class="form-control" type="text" placeholder="文本框">
    <input class="form-control" type="password" placeholder="密码框">
    <select class="form-select">
      <option value="1">湖南</option>
      <option value="2">湖北</option>
    </select>
    <textarea class="form-control"></textarea>
  </div>

  <!-- 
    form和表单元素，表单元素动作会触发form的action
    没有action就会刷新本页面，需要onsubmit="return false;"阻止
  -->
  <form class="myform" action="https://huhuiyu.top" onsubmit="return false;">
    <input type="text" class="form-control">

    <input type="submit" class="btn btn-success">
    <input type="reset" class="btn btn-danger">
  </form>

  <!-- 两个特别的表单元素 -->
  <div class="form-check-inline">
    <label class="form-check-label">
      <input class="form-check-input" type="radio" name="sex">男生
    </label>
  </div>

  <div class="form-check-inline">
    <label class="form-check-label">
      <input class="form-check-input" checked type="radio" name="sex">女生
    </label>
  </div>

  <div class="form-check-inline">
    <label class="form-check-label">
      <input class="form-check-input" checked type="checkbox">电影
    </label>
  </div>

  <div class="form-check-inline">
    <label class="form-check-label">
      <input class="form-check-input" type="checkbox">音乐
    </label>
  </div>

  <div class="h1 text-center">标题一</div>
  <div class="h2 text-end">标题二</div>
  <div class="h3 text-start">标题三</div>
  <div class="h4">标题四</div>
  <div class="h5">标题五</div>
  <div class="h6">标题六</div>

  <div>
    <input type="text" class="form-control form-control-lg">
    <input type="text" class="form-control">
    <input type="text" class="form-control form-control-sm">
    <button class="btn btn-danger btn-lg">按钮一</button>
    <button class="btn btn-primary btn-sm">按钮二</button>
    <button class="btn btn-outline-danger">按钮三</button>
  </div>

  <div class="form-floating">
    <input id="txtUser" type="text" class="form-control" placeholder="用户名">
    <label for="txtUser">用户名</label>
  </div>

  <!-- m-n 0-6，表示不同级别的外边距 -->
  <div class="d-flex">
    
    <div class="input-group m-2">
      <span class="input-group-text">@</span>
      <input type="text" class="form-control">
      <span class="input-group-text btn btn-primary">✔</span>
    </div>
    <div class="input-group m-2">
      <span class="input-group-text">@</span>
      <input type="text" class="form-control">
      <span class="input-group-text btn btn-primary">✔</span>
    </div>

  </div>

  <script src="js/bootstrap.bundle.min.js"></script>
</body>

</html>